.detailscourse a { color: #000; }

.detailscourse .header { background-color: #fff; height: 44px; line-height: 44px; position: sticky; width: 375px; left: 0; top: 0; z-index: 10000; border-bottom: 1px solid #f2f2f2; }

.detailscourse .header .header-wrap { display: flex; justify-content: space-between; align-items: center; padding: 0px 10px; height: 44px; line-height: 44px; font-size: 16px; color: #333; }

.detailscourse .header .header-wrap img { width: 22px; height: 22px; }

.detailscourse .header .header-wrap .icon-sort { font-size: 22px; color: #333; }

.detailscourse .video { height: 210px; }

.detailscourse .video video { width: 100%; height: 100%; background-color: #000; }

.detailscourse .goods-show { background-color: #fff; padding: 10px 15px; }

.detailscourse .goods-show .goods-desc h5 { margin-top: 2px; margin-bottom: 6px; color: #383838; font-size: 15px; }

.detailscourse .goods-show .goods-desc p { color: #909090; font-size: 12px; }

.detailscourse .goods-show .user { border-radius: 5px; box-shadow: 0 0 10px #e8e8e8; margin-top: 20px; display: flex; align-items: center; padding: 10px; }

.detailscourse .goods-show .user .img { width: 50px; height: 50px; margin-right: 15px; }

.detailscourse .goods-show .user .img img { width: 100%; height: 100%; border-radius: 50%; }

.detailscourse .goods-show .user .content { flex: 1; }

.detailscourse .goods-show .user .content .title { color: #383838; font-size: 12px; margin-bottom: 2px; }

.detailscourse .goods-show .user .content .txt { color: #909090; font-size: 12px; width: 244px; }

.detailscourse .goods-show .course { margin-top: 20px; }

.detailscourse .goods-show .course .title { display: flex; }

.detailscourse .goods-show .course .title .line { width: 4px; height: 16px; border-radius: 2px; margin-top: 2px; background-color: #ff7f02; }

.detailscourse .goods-show .course .title h5 { padding-left: 5px; font-size: 14px; color: #383838; }

.detailscourse .goods-show .course .title span { color: #909090; font-size: 14px; }

.detailscourse .goods-show .course .courseList ul { margin-top: 10px; display: flex; flex-wrap: wrap; }

.detailscourse .goods-show .course .courseList ul li { background-color: #f7f7f7; color: #333333; width: 42px; height: 42px; line-height: 42px; text-align: center; font-size: 14px; margin-bottom: 7px; margin-right: 7px; }

.detailscourse .goods-show .course .courseList ul .active { color: #fffdf8; background-color: #fd810f; }

.detailscourse .goods-show .course .introduction .title { display: flex; margin-top: 15px; }

.detailscourse .goods-show .course .introduction .title .line { width: 4px; height: 16px; border-radius: 2px; margin-top: 2px; background-color: #ff7f02; }

.detailscourse .goods-show .course .introduction .title h5 { padding-left: 5px; font-size: 14px; color: #383838; }

.detailscourse .goods-show .course .introduction .context { margin-top: 10px; color: #909090; font-size: 12px; }

.detailscourse .goods-show .course .catalogue .title { display: flex; margin-top: 20px; }

.detailscourse .goods-show .course .catalogue .title .line { width: 4px; height: 16px; border-radius: 2px; margin-top: 2px; background-color: #ff7f02; }

.detailscourse .goods-show .course .catalogue .title h5 { padding-left: 5px; font-size: 14px; color: #383838; }

.detailscourse .goods-show .course .catalogue .title span { color: #909090; font-size: 14px; }

.detailscourse .goods-show .course .catalogue .content ul { margin-top: 10px; display: flex; justify-content: space-between; flex-wrap: wrap; }

.detailscourse .goods-show .course .catalogue .content ul li { color: #383838; box-shadow: 0 0 10px #e8e8e8; width: 162px; border-radius: 8px; overflow: hidden; justify-content: space-around; margin-bottom: 12px; }

.detailscourse .goods-show .course .catalogue .content ul li .u-img { height: 100px; width: 162px; position: relative; }

.detailscourse .goods-show .course .catalogue .content ul li .u-img img { height: 100%; width: 100%; object-fit: cover; vertical-align: bottom; }

.detailscourse .goods-show .course .catalogue .content ul li .u-img .icon { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; width: 30px; background: url(http://pub.szzhangchu.com/web/v4.2/images/ico/ico-play.png); background-size: 100%; height: 30px; display: inline-block; }

.detailscourse .goods-show .course .catalogue .content ul li .u-info { height: auto; padding: 8px; }

.detailscourse .goods-show .course .catalogue .content ul li .u-info p { height: 30px; font-size: 12px; color: #383838; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.detailscourse .goods-show .course .catalogue .content ul li .u-info .u-user { margin-top: 5px; display: flex; }

.detailscourse .goods-show .course .catalogue .content ul li .u-info .u-user img { width: 30px; height: 30px; border-radius: 50%; margin-right: 5px; object-fit: cover; vertical-align: bottom; }

.detailscourse .goods-show .course .catalogue .content ul li .u-info .u-user span { display: block; width: 60%; height: 30px; line-height: 30px; color: #333; font-size: 10px; -webkit-line-clamp: 1; }

.detailscourse .goods-show .course .catalogue .content .more { text-align: center; margin: 12px 0px; }

.detailscourse .goods-show .course .recommend .title { display: flex; margin-top: 20px; }

.detailscourse .goods-show .course .recommend .title .line { width: 4px; height: 16px; border-radius: 2px; margin-top: 2px; background-color: #ff7f02; }

.detailscourse .goods-show .course .recommend .title h5 { padding-left: 5px; font-size: 14px; color: #383838; }

.detailscourse .goods-show .course .recommend .content ul { margin-top: 15px; }

.detailscourse .goods-show .course .recommend .content ul li { margin-bottom: 14px; width: 325px; height: 80px; padding: 10px; background-color: #fff; box-shadow: 0 0 10px #e8e8e8; display: flex; border-radius: 5px; overflow: hidden; }

.detailscourse .goods-show .course .recommend .content ul li .img { position: relative; width: 80px; height: 80px; border-radius: 5px; overflow: hidden; }

.detailscourse .goods-show .course .recommend .content ul li .img img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; }

.detailscourse .goods-show .course .recommend .content ul li .img .icons { padding: 3px 5px; text-align: center; background-color: #7ec032; font-size: 10px; position: absolute; top: 0; left: 0; color: #fff; top: -4px; left: -5px; transform: scale(0.7); }

.detailscourse .goods-show .course .recommend .content ul li .img .icon { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; width: 26px; background: url(http://pub.szzhangchu.com/web/v4.2/images/ico/ico-play.png); background-size: 100%; height: 26px; display: inline-block; }

.detailscourse .goods-show .course .recommend .content ul li .img .video-count { position: absolute; bottom: 4px; left: 4px; color: #fff; font-size: 10px; }

.detailscourse .goods-show .course .recommend .content ul li .text { margin-left: 10px; width: 72%; }

.detailscourse .goods-show .course .recommend .content ul li .text h2 { color: #1e1e1e; font-size: 14px; font-weight: bold; margin-bottom: 6px; }

.detailscourse .goods-show .course .recommend .content ul li .text span { color: #939393; font-size: 12px; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
